@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}


em,
i {
    font-style: normal;
}

a {
    text-decoration: none !important;
}

li {
    list-style: none;
}

.wrapper {
    width: 1240px;
    height: 100%;
    margin: 0 auto;
}

// 头部
.header {
    width: 100%;
    height: 90px;
    font-size: 14px;
    position: absolute;
    z-index: 999;
    line-height: 90px;

    .logo {
        float: left;

        img {
            width: 150px;
            height: 70px;
        }
    }

    .nav {
        float: left;
        margin-left: 150px;

        .has-Second-nav:hover {
            .second-nav-ul {
                display: block;
            }
        }

        .first-nav-ul>li {
            float: left;
            list-style: none;

            &>a {
                padding: 31px 20px 30px;
                text-decoration: none;
                color: #fff;

                &:hover {
                    color: #00c3f5;
                }
            }


            .second-nav-ul {
                position: absolute;
                top: 90px;
                left: 0;
                width: 100%;
                height: 200px;
                background-color: #fff;
                z-index: 1000;
                display: none;

                &>ul {
                    width: 75%;
                    height: 200px;
                    margin: 0 auto;

                    li {
                        float: left;
                        width: 100px;
                        margin: 20px 20px 0;
                        opacity: 0.6;

                        img {
                            display: block;
                            width: 100%;
                            height: 120px;
                        }

                        span,
                        em {
                            width: 90px;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: block;
                            text-align: center;
                            font-size: 12px;
                            color: #333;
                            line-height: 20px;
                        }
                    }
                }
            }

            .last-ul {
                height: 400px;

                li {
                    width: 100%;
                    margin-left: 150px;
                    margin-top: 30px;

                    img {
                        object-fit: cover;
                        width: 80%;
                    }
                }
            }
        }
    }

    .header-search {
        float: left;
        margin-left: 15px;
        width: 160px;
        line-height: 20px;
        margin-top: 30px;
        border-radius: 20px;
        padding: 5px;
        background-color: #fff;

        #header-search-inp {
            height: 20px;
            width: 120px;
            color: #333;
            padding: 0 5px;
            border: 0;
            font-size: 12px;
            vertical-align: middle;
            outline: none;
        }

        i {
            font-size: 22px;
            color: #515151;
            font-weight: 900;
            vertical-align: middle;
        }
    }

    .header-my,
    .header-shopCar {
        float: left;
        margin-left: 15px;
        height: 70px;
        position: relative;

        &:hover {
            &>div {
                display: block;
            }
        }

        i {
            font-size: 24px;
            color: #fff;


        }

        &>div {
            display: none;
        }

        .sanjiao {
            position: absolute;
            top: 65px;
            left: 10px;
            z-index: 1000;
            border: 5px solid transparent;
            border-bottom: 5px solid #fff;
        }

        .access-box {
            padding: 5px;
            position: absolute;
            left: -20px;
            top: 75px;
            z-index: 1000;
            width: 70px;
            height: 100px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 5px;

            p {
                cursor: pointer;
                padding: 5px;
                text-align: center;
                font-size: 12px;
                line-height: 20px;
                margin: 0;

                &:hover {
                    color: #00c3f5;
                }
            }
        }
    }

}